<template>
	<view>
		<view class="" v-if="is_shows">


			<view class="position-fixed">
				<view class="position-fixed-dang">
					<view class="banmi_flex j-c bg-white a-c  pos-zzz">
						<view class="">
							选择位置
						</view>
						<view class="" @click="on_close" style="position: absolute;right: 15px;">
							<icon-close-one size="40" color="#333"></icon-close-one>
						</view>
					</view>
					<iframe width="100%" height="600" :src="url">
					</iframe>

					<view class="banmi_flex j-s bg-white a-c  pos-zzz" style="margin-top: -12rpx;height: 60px;">
						<view @click="on_close" style="color: #A9A9A9;font-size: 18px;">
							关闭
						</view>
						<view class="" @click="confirm" style="color: #1E90FF;font-weight: 800;font-size: 18px;">
							确认
						</view>

					</view>


				</view>
			</view>
			<view class="qq-mask">

			</view>

		</view>

	</view>
</template>

<script type="text/javascript">
	export default {
		name: 'up-map-qq',
		props: {
			banmi_key: {
				type: Number | String,
				default: ''
			},
		},
		data() {
			return {
				is_shows: false,
				url:''

			}
		},
		mounted() {
			let that = this


			if (!this.banmi_key) {
				uni.showModal({
					title: '提示',
					content: '请先设置地图秘钥',
					success: function(res) {
						that.on_close();
					}
				});
				return
			}

			this.url = 'https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=' + this.banmi_key + '&referer=myapp'
			this.is_shows = true;


			window.addEventListener('message', function(event) {
				// 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息
				var loc = event.data;

				if (loc && loc.module == 'locationPicker') { //防止其他应用也会向该页面post信息，需判断module是否为'locationPicker'


					that.arr_map = {
						"lat": loc.latlng.lat,
						"lng": loc.latlng.lng,
						'poiaddress': loc.poiaddress,
						'poiname': loc.poiname,
						'cityname': loc.cityname,
					}


				}
			}, false);
		},
		methods: {
			confirm() {
				this.is_shows = false;
				this.$emit('confirm', this.arr_map)
			},
			on_close() {
				this.is_shows = false;
				this.$emit('close')
			}



		}
	}
</script>
<style scoped>
	.qq-mask {
		z-index: 999988;
		position: fixed;
		left: 0;
		top: 0;
		background-color: rgba(0, 0, 0, 0.6);
		width: 750rpx;
		height: 100vh;
	}

	.pos-zzz {
		height: 40px;
		width: 706rpx;
		margin-left: 3rpx;
		position: relative;
		top: 2px;
	}

	.position-fixed {
		position: fixed;
		top: 10%;
		width: 750rpx;
		display: flex;

		justify-content: center;
		z-index: 999999;
	}

	.position-fixed-dang {
		width: 700rpx;
		margin-right: 15%;
		position: absolute;
	}


	/* 	button {
		background-color: transparent;
	}

	button::after {
		border: none;
	} */

	/* #ifndef APP-NVUE */
	.set-capital {
		text-align: center;
		line-height: 30px;
		height: 30px;
		padding: 0 5px;
		right: 0;
		/* width: 30px; */
		background: #1AAD19;
		color: #FFFFFF;
		position: absolute;
		bottom: 0px;
		font-size: 12px;
	}

	.close-view {
		text-align: center;
		line-height: 14px;
		height: 16px;
		width: 16px;
		border-radius: 50%;
		background: #FF5053;
		color: #FFFFFF;
		position: absolute;
		top: -6px;
		right: -4px;
		font-size: 12px;
	}

	.uni-uploader__input-box {
		position: relative;
		width: 208upx;
		height: 208upx;
		border: 2upx solid #D9D9D9;
	}

	.uni-uploader__input {
		position: absolute;
		z-index: 1;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		opacity: 0;
	}

	.uni-uploader-body {
		margin-top: 16upx;
	}

	.uni-uploader__files {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}

	.uni-uploader__img {
		display: block;
		width: 210upx;
		height: 210upx;
	}

	/* #endif */
</style>